import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import Draw from '@/components/MapView/Mapless/draw';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const drawRef = useRef<Draw>(undefined);

  const onInit = () => {
    if (maplessRef.current) {
      drawRef.current = new Draw(maplessRef.current);
    }
  };

  const onDrawPointStart = () => {
    drawRef.current?.startDrawing('point');
  };

  const onDrawLineStart = () => {
    drawRef.current?.startDrawing('line_string');
  };

  const onDrawPolygonStart = () => {
    drawRef.current?.startDrawing('polygon');
  };

  const onDrawStop = () => {
    drawRef.current?.cancelDrawing();
  };

  function onDeleteSelects() {
    drawRef.current?.deleteDraw();
  }

  function onDeleteAll() {
    drawRef.current?.clearDrawings();
  }

  const onDrawAngleStart = () => {
    drawRef.current?.startDrawing('angle');
  };

  const onGetPositionAsync = async () => {
    if (!drawRef.current) return;
    const [pos, err] = await drawRef.current.startPointPickingAsync();
    alert(pos ? `经度: ${pos.lng}, 纬度: ${pos.lat}` : err);
  };

  const onGetPosition = () => {
    if (!drawRef.current) return;
    drawRef.current.startPointPicking();
  };

  return (
    <div className={styles.test}>
      <Button onClick={onInit}>配置绘制工具</Button>
      <Button onClick={onDeleteSelects}>删除选中</Button>
      <Button onClick={onDeleteAll}>删除所有</Button>
      <span style={{ flexBasis: '100%' }} />
      <Button onClick={onDrawPointStart}>开始绘点</Button>
      <Button onClick={onDrawLineStart}>开始绘线</Button>
      <Button onClick={onDrawPolygonStart}>开始绘面</Button>
      <Button onClick={onDrawAngleStart}>开始绘角</Button>
      <Button onClick={onDrawStop}>停止绘制</Button>
      <span style={{ flexBasis: '100%' }} />
      <Button onClick={onGetPosition}>获取坐标</Button>
      <Button onClick={onGetPositionAsync}>获取坐标Async</Button>
    </div>
  );
};

export default Index;
